<template>
  <div class="wrap">
    <div class="wrap-box">
      <div class="wrap-box-num">
        <p>会员</p>
        <span>{{ countUser.count1 }}</span>
      </div>
      <div class="wrap-box-num">
        <p>会员近7日新增</p>
        <span>{{ countUser.count2 }}</span>
      </div>
      <div class="wrap-box-num">
        <p>商家</p>
        <span>{{ countCompany.count1 }}</span>
      </div>
      <div class="wrap-box-num">
        <p>商家近7日新增</p>
        <span>{{ countCompany.count2 }}</span>
      </div>
      <div class="wrap-box-num">
        <p>专家</p>
        <span>{{ countExpert.count1 }}</span>
      </div>
      <div class="wrap-box-num">
        <p>专家近7日新增</p>
        <span>{{ countExpert.count2 }}</span>
      </div>
    </div>
    <div class="wrap-chart">
      <div
        class="wrap-chart-box"
        v-for="(item, index) in countCompanyPercent"
        :key="index"
      >
        <el-progress
          type="circle"
          :width="100"
          :stroke-width="10"
          :percentage="Number(item.percent)"
        ></el-progress>
        <span>{{ item.count }}</span>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import pieProgress from './pie-progress'
export default {
  components: {
    pieProgress,
  },
  data() {
    return {
      countUser: {},
      countCompany: {},
      countExpert: {},
      countCompanyPercent: [],
    }
  },
  created() {
    this.countUserList()
    this.countCompanyList()
    this.countExpertList()
    this.countCompanyPercentList()
  },
  methods: {
    countUserList() {
      //会员
      this.$axios.get('/count/bigscreent1/countUser').then((data) => {
        this.countUser = {}
        if (data.code == 200) {
          this.countUser = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countCompanyList() {
      //商家
      this.$axios.get('/count/bigscreent1/countCompany').then((data) => {
        this.countCompany = {}
        if (data.code == 200) {
          this.countCompany = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countExpertList() {
      //专家
      this.$axios.get('/count/bigscreent1/countExpert').then((data) => {
        this.countExpert = {}
        if (data.code == 200) {
          this.countExpert = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countCompanyPercentList() {
      //占比
      this.$axios.get('/count/bigscreent1/countCompanyPercent').then((data) => {
        this.countCompanyPercent = []
        if (data.code == 200) {
          this.countCompanyPercent = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  &-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    &-num {
      border-radius: 4px;
      border: 1px solid #ebeef5;
      color: #303133;
      padding: 15px 25px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      p {
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
        margin-bottom: 10px;
      }
      span {
        font-size: 32px;
        font-weight: 400;
        color: #000000;
      }
    }
  }
  &-chart {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    &-box {
      position: relative;
      .el-progress {
        display: flex;
        justify-content: center;
      }
      span {
        display: block;
        text-align: center;
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translate(-50%, 0%);
      }
      p {
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #636360;
        margin-top: 10px;
      }
    }
  }
}
</style>
